<script setup lang="ts">
import {useUserViewStore} from "@/store/views/sys/admin/userStore";
import {FormInstance, FormRules} from "element-plus";
import {UserVoPartial} from "@/api/sys/admin/user/types";
import {addUserApi, editUserApi} from "@/api/sys/admin/user";
import {storeToRefs} from "pinia";
import {OpenFormType, Perm} from "@/utils/enum-type";

const store = useUserViewStore()
const {setVisible, getList, title} = store
const {openFormType, formData, visible} = storeToRefs(store)


// 编辑表单时规则验证
const ruleFormRef = ref<FormInstance>()
const loading = ref(false)

const rules: FormRules<Omit<UserVoPartial, 'roles'>> = {
  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {min: 1, message: '昵称长度至少为1', trigger: 'blur'},
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 1, message: '昵称长度为至少为1', trigger: 'blur'},
  ],
  nickname: [
    {required: true, message: '请输入昵称', trigger: 'blur'},
    {min: 1, message: '昵称长度至少为1', trigger: 'blur'},
  ],
  email: [
    {required: true, message: '邮箱填一下下吧', trigger: 'blur'},
    {type: 'email', message: '请输入正确的邮箱', trigger: 'change'},
  ],
}
const addOrEditWord = openFormType.value === OpenFormType.Add ? '添加' : '修改'


// 提交编辑
async function submit(formEl: FormInstance | undefined) {
  if (!formEl) {
    return;
  }
  await formEl.validate((valid, fields) => {
    if (valid) {
      let promise: Promise<any>
      if (openFormType.value === OpenFormType.Add) {
        promise = addUserApi(formData.value)
      } else {
        promise = editUserApi(formData.value.id, formData.value)
      }
      promise.then(async () => {
        loading.value = true
        await getList()
        ElMessage.success(`${addOrEditWord}`)
        setVisible(false)
      }).finally(() => {
        loading.value = false
      })
    } else {
      console.log('错误的字段', fields)
    }
  })

}

</script>

<template>
  <!-- 弹出框 :新增-->
  <el-dialog draggable v-model="visible" :title="`${addOrEditWord}${title}`" width="500" destroy-on-close>
    <el-form :model="formData" label-suffix=":" label-width="80" ref="ruleFormRef" :rules="rules">
      <el-form-item label="头像" prop="avatar">
        <x-upload v-model="formData.avatar" path="avatar"/>
      </el-form-item>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="formData.username" placeholder="这是您的登陆帐号,请记好"/>
      </el-form-item>
      <el-form-item v-if="openFormType===OpenFormType.Add" label="密码" prop="password">
        <el-input v-model="formData.password" type="password" show-password/>
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="formData.nickname"/>
      </el-form-item>
      <el-form-item label="性别">
        <x-dict-select type-code="gender" v-model="formData.gender"/>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="formData.email" placeholder="emample@xx.mail"/>
      </el-form-item>
      <el-form-item v-perm="Perm.SysUserStatus" label="状态" prop="status">
        <x-dict-select type-code="status" v-model="formData.status"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="setVisible(false)">取消</el-button>
        <el-button type="primary" :loading="loading" @click="submit(ruleFormRef)">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>